<template>
	<view class="box-main">
		<!-- 标题 -->
		<view class="title-section">
			<text class="title">{{detail.title || ''}}</text>
			<view class="info-row">
				<text class="label" v-if="detail.label">{{detail.label}}</text>
				<text class="time">{{$timer.formatTime(detail.create_time) || ''}}</text>
			</view>
		</view>

		<!-- 代码重构以前的 后面可以删除掉 -->
		<block v-if="detail.content">
			<!-- 内容 -->
			<view class="content-section">
				<text class="content">{{detail.content || ''}}</text>
			</view>

			<!-- 图片展示 -->
			<view class="image-section" v-if="imageList.length">
				<image v-for="(item, index) in imageList" :key="index" :src="item" mode="widthFix" class="content-image"
					@click="previewImage(index)" />
			</view>
		</block>

		<block v-else>
			<jyf-parser :html="detail.text.replace(/<br\/>/ig, '')" ref="article"></jyf-parser>
		</block>



	</view>
</template>

<script>
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		UserArticleDetail
	} from "@/api/extend";

	export default {
		components: {
			"jyf-parser": parser,
		},
		data() {
			return {
				detail: {
					title: '',
					text: '',
					content: '',
					label: '',
					create_time: '',
					url: ''
				},
				imageList: []
			}
		},
		computed: {
			uid() {
				return this.$store.state.app.uid
			}
		},
		onLoad(options) {
			if (options.id) {
				this.getDetail(options.id);
			}
		},
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: this.detail.title || '动态资讯',
				imageUrl: this.imageList[0] || '',
				path: '/pages/index/index?uid=' + (that.uid || -1)
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: this.detail.title || '动态资讯',
				query: {
					uid: this.uid || -1
				},
				imageUrl: this.imageList[0] || ''
			};
		},
		methods: {
			getDetail(id) {
				uni.showLoading({
					title: '加载中...'
				});
				UserArticleDetail({
					id: id
				}).then(res => {
					if (res.status === 200) {
						this.detail = res.data;
						// 处理图片列表
						this.imageList = this.detail.url ? this.detail.url.split(',') : [];
					}
				}).finally(() => {
					uni.hideLoading();
				});
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.imageList,
					current: index
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-main {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.title-section {
		margin-bottom: 40rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			line-height: 1.4;
		}

		.info-row {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20rpx;

			.label {
				background-color: rgba(77, 126, 251, .25);
				color: #2965FF;
				padding: 4rpx 20rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
			}

			.time {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.content-section {
		margin-bottom: 40rpx;

		.content {
			font-size: 30rpx;
			color: #333;
			line-height: 1.6;
		}
	}

	.image-section {
		.content-image {
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
		}
	}
</style>